<template>
  <page-frame>
    <div class="followComplaint">
      <div class="toptitle">
        <div class="left">问题上报-记录</div>
        <div class="right">
          <div class="btns">
            <el-button @click="submit" class="lightGreenBtn submit" v-if="isEnd">提交</el-button>
            <el-button @click="back" class="submit">返回</el-button>
          </div>
        </div>
      </div>
      <div class="borderT"></div>
      <div class="file-content">
        <el-form label-width="120px">
          <el-row>
            <el-col :span="12">
              <el-form-item label="提出人" prop="proposer">
                <el-input v-model="proposer" disabled></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="床位" prop="location">
                <el-input v-model="location" disabled></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="咨询时间" prop="createTime">
                <el-date-picker
                  v-model="createTime"
                  type="datetime"
                  disabled
                  placeholder="选择日期时间">
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="问题类型" prop="woTypeId">
                <el-select v-model="woTypeId" disabled placeholder="请选择类型">
                  <el-option
                    v-for="item in typeOptions"
                    :label="item.typeName"
                    :value="item.woTypeId">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="22">
              <el-form-item label="问题描述" prop="woDesc">
                <div v-html="woDesc" class="des"></div>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row style="">
            <el-col :span="12">
              <el-form-item label="记录人" prop="currentName">
                <el-input v-model="currentName" disabled></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <div v-for="(item,index) in followCheckComplainDetail">
          <el-form label-width="120px">
            <el-row>
              <el-col :span="24" class="followRecord">
                <span>跟进记录</span>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="22" style="">
                <el-form-item label="处理描述" prop="description">
                  <div v-html="item.description" class="des"></div>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="处理人" prop="slover">
                  <el-input v-model="item.slover" disabled></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="处理时间" prop="solveTime">
                  <el-date-picker
                    v-model="item.solveTime"
                    type="datetime"
                    placeholder="选择日期时间"
                    align="right"
                    disabled
                  >
                  </el-date-picker>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="是否已解决" prop="status">
                  <el-radio-group v-model="item.status">
                    <el-radio :label="1" disabled>是</el-radio>
                    <el-radio :label="0" disabled>否</el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </div>
        <el-form label-width="120px" v-if="isEnd">
          <div>
            <el-row>
              <el-col :span="24" class="followRecord">
                <span>跟进记录</span>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="22" style="margin-bottom:90px;">
                <el-form-item label="处理描述" prop="description">
                  <quill-editor
                    style="height:200px;"
                    ref="myTextEditor3"
                    v-model="ruleForm.description"
                    :options="editorOption"
                  >
                  </quill-editor>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="处理人" prop="solverId">
                  <el-autocomplete v-model="responsible.empName" :fetch-suggestions="querySearchAsyncs" placeholder="请输入指派责任人" @select="responsibleSelect"></el-autocomplete>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="是否已解决" prop="status">
                  <el-radio-group v-model="ruleForm.status">
                    <el-radio :label="1">是</el-radio>
                    <el-radio :label="0">否</el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-col>
            </el-row>
          </div>
        </el-form>
      </div>
    </div>
  </page-frame>
</template>

<script>
  import {quillEditor} from  'vue-quill-editor';
  import consultingComplaintApi from '../../service/serCenter/consultingComplaintApi';
  import commonApi from '../../service/member/commonApi';
  export default {
    data () {
      return {
        ways:true,
        isEnd:false,
        proposer: "",
        createTime: "",
        location: "",
        woTypeId: null,
        woDesc: "",
        currentName:'',
        followCheckComplainDetail:[],
        ruleForm: {
          description: "",
          status: 0,
          solverId: null,
          woId: null
        },
        responsible:{
          empName:''
        },
        memberInfor:{},
        emps:[],
        typeOptions:[],
        currentStatus:null,
        currentWoId:null,
        editorOption:{
          placeholder: '请填写处理描述',
        },
      }
    },
    methods: {
      init() {
        this.currentStatus = this.$route.params.status;
        this.currentWoId = this.$route.params.woId;
        this.getAllProTypes();
        this.getAllEmployee();
        this.getDetailInfo(this.currentWoId);
        if(this.currentStatus==1){//已解决
          this.isEnd = false;
        }else{//继续跟踪记录
          this.isEnd = true;
        }
      },
      /**
       * 加载基本信息
       */
      getDetailInfo(woId){
        let self = this;
        consultingComplaintApi.getComplainDetail(woId).then(
          (response)=>{
            //baseInfo
            self.proposer = response.data.data.proposer;
            self.createTime = response.data.data.createTime;
            self.location = response.data.data.location;
            self.woTypeId = response.data.data.woTypeId;
            self.woDesc = response.data.data.woDesc;
            self.currentName = response.data.data.currentName;
            //follow record
            self.followCheckComplainDetail = response.data.data.lists;
          }
        );
      },
      /**
       * 提交
       */
      submit(){
        //从url中获取参数工单id
        this.ruleForm.woId = this.currentWoId;
        consultingComplaintApi.updateComplain(this.ruleForm).then(
          (response)=>{
            this.$message({
              message: '提交成功',
              type: 'success'
            });
            this.$router.push({name:'consultingComplaint'});
          }
        );
      },
      /**
       * 返回上一级
       */
      back(){
        this.$router.push({name:'consultingComplaint'});
      },
      /**
       * 筛选指派责任人(三个相关的函数)
       */
      querySearchAsyncs(queryString, cb) {
        var emps = this.emps;
        var results = queryString ? emps.filter(this.createStateFilters(queryString)) : emps;

        clearTimeout(this.timeout);
        this.timeout = setTimeout(() => {
            cb(results);
        console.debug(results);
      }, 1000);
      },
      createStateFilters(queryString) {
        return (state) => {
          return (state.emName.indexOf(queryString.toLowerCase()) === 0);
        };
      },
      responsibleSelect(item){
        this.ruleForm.solverId = item.emId;
      },
      /**
       * 获得所有员工
       */
      getAllEmployee(){
        let self = this;
        consultingComplaintApi.getAllStaff(self.responsible).then(
          (response)=>{
            self.emps = response.body.data;
            for(var i=0;i<self.emps.length;i++){
              var emp = self.emps[i];
              emp.value = emp.emName;
            };
          }
        );
      },
      /**
       * 获取所有问题类型
       */
      getAllProTypes(){
        let self  = this;
        consultingComplaintApi.getProTypes().then(
          (response)=>{
            self.typeOptions = response.data.data;
          }
        );
      },
    },
    components:{
      quillEditor
    },
    mounted: function () {
      this.init();
    },
  }
</script>
<style>
  .submit {
    width: 90px;
  }
  .followComplaint .formItem {
    margin: 20px 0 0 20px;
  }
  .followComplaint .file-content{
    width:80%;
    margin:0 auto;
  }
  .followComplaint .el-textarea{
    width:91%!important;
  }
  .followComplaint .followRecord{
    padding-left: 50px;
    font-size: 18px;
    margin: 20px 0;
    background-color: #f9f9f9;
    line-height: 40px;
    height:40px;
  }
  .followComplaint .el-form-item__content .des{
    background-color: #eef1f6;
    border: 1px solid #d1dbe5;
    border-radius: 4px;
    padding: 0px 10px;
    color: #666666;
    min-height:36px;
  }
</style>
